<template>
  <div id="app">
    <div class="left" :style="$root.app.menuClosed?'width:80px':'width:200px'">
      <div v-if="this.$root.app.menuClosed" class="logoBg">
        <img class="logo" src="@/assets/logo.png" alt="">
      </div>
      <div v-else class="title">{{$t('app.title')}}</div>
      <system_menu></system_menu>
    </div>
    <div class="right" :style="$root.app.menuClosed?'left:80px':'left:200px'">
      <top></top>
      <div class="container">
        <div class="box">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import system_menu from "@/components/system_menu";
import top from "@/components/top";
import "@/assets/css/index.scss";
export default {
  components: { system_menu, top },
  data() {
    return {
    };
  },
  methods: {}
};
</script>
<style scoped>
.logoBg{
  background:#f3f3f3;height:60px;line-height:60px;text-align:center;
}
.logo{
  width:48px;height:48px;
}
.box {
  background: #fff;
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  overflow: auto;
  padding: 18px;
}
#app {
  height: 100%;
}
.title {
  height: 60px;
  text-align: center;
  font-size: 22px;
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  line-height: 60px;
  font-weight: 600;
  color: #fff;
}
.left {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  background: #001529;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  display: flex;
  flex-direction: column;
}
.right {
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: #f6f6f6;
}
.container {
  position: absolute;
  top: 60px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: auto;
  padding: 18px;
}
</style>
